<template>
	<view>
		<u-navbar title="添加联系人" :autoBack="true" :placeholder="true" titleStyle="color:#fff" bgColor="#7e5a91"
			leftIconColor="#fff"></u-navbar>

		<view class="container">
			<!-- 报名提示 -->
			<view class="hint">
				<view class="hint-title">
					报名提示：
				</view>
				<view class="hint-content">
					搜集家长(联系人)的联系方式、身份证号、邮箱等主要用于给出行人(孩子)上保险及行程相关信息发送，尤为重要，请按要求填写，明德励志研学旅行组委会将恪守法律，保护用户的个人信息安全
				</view>
			</view>

			<!-- 表格 -->

			<view class="form">

				<view class="form-item">
					<view class="form-item-title">
						姓名：<span style="color:red">*</span>
					</view>
					<view class="form-item-input-box">
						<input class="form-item-input" v-model="formData.name" type="text" placeholder="姓名(关系人)" />
					</view>
				</view>

				<view class="form-item">
					<view class="form-item-title">
						电话：<span style="color:red">*</span>
					</view>
					<view class="form-item-input-box">
						<input class="form-item-input" v-model="formData.mobile" type="number"
							placeholder="联系方式(关系人)" />
					</view>
				</view>

				<view class="form-item">
					<view class="form-item-title">
						关系：<span style="color:red">*</span>
					</view>
					<view class="form-item-input-box">
						<input class="form-item-input" v-model="formData.relax" type="text" placeholder="关系(关系人)" />
					</view>
				</view>

				<view class="form-item">
					<view class="form-item-title">
						证件类型：
					</view>
					<view class="form-item-input-box">
						<radio-group @change="cartTypeChange" class="form-group">
							<label class="form-lable" v-for="(item,index) in cartTypes" :key="index">
								<view class="radio-box">
									<radio :value="item.value" color="#7e5a91" class="radio"
										:checked="userinfo.gender == item.value" />
								</view>
								<view class="weui-cell__bd">{{item.name}}</view>
							</label>
						</radio-group>
					</view>
				</view>

				<view class="form-item">
					<view class="form-item-title">
						证件号：<span style="color:red">*</span>
					</view>
					<view class="form-item-input-box">
						<input class="form-item-input" v-model="formData.idcard" type="idcard" placeholder="证件号(关系人)" />
					</view>
				</view>

				<view class="sub-btn-box">
					<view class="sub-btn" @click="addChuxinglianxi">
						添加联系人
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cartTypes: [{
					value: '1',
					name: '身份证'
				}, {
					value: '2',
					name: '港澳通行证'
				}, {
					value: '3',
					name: '台湾通行证'
				}, {
					value: '4',
					name: '护照'
				}], //证件类型
				formData: {
					name: '', //姓名
					mobile: '', //手机号
					relax: '', //关系
					typecrad: '', //证件类型
					idcard: '', //证件号
				}, //表单数据

			}
		},
		methods: {
			async addChuxinglianxi() {
				if (this.formData.name == '') {
					this.$u.toast('请输入姓名')
					return;
				}
				if (this.formData.mobile == '') {
					this.$u.toast('请输入手机号')
					return;
				}
				if (this.formData.relax == '') {
					this.$u.toast('请输入关系')
					return;
				}
				if (this.formData.idcard == '') {
					this.$u.toast('请输入证件号')
					return;
				}
				let res = await this.$api.addChuxinglianxi(this.formData);

				if (res.code == 1) {
					this.$u.toast(res.msg)
					wx.navigateBack()
				}
			},

			cartTypeChange(e) {
				this.formData.typecrad = e.detail.value
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 20rpx;

		.hint {
			font-size: 22rpx;

			.hint-title {
				font-size: 24rpx;
				line-height: 50rpx;
			}

			.hint-content {
				line-height: 32rpx;
				color: #333;
				text-indent: 4ch;
			}
		}

		.form {
			padding: 40rpx 10rpx 0 10rpx;

			.form-item {
				display: flex;
				font-size: 26rpx;
				color: #666;
				margin-bottom: 25rpx;

				&-title {
					width: 200rpx;
					line-height: 50rpx;
				}

				&-input-box {
					width: 100%;

					.form-item-input {
						background-color: white;
						padding: 0 10rpx;
						height: 60rpx;
						width: calc(100% - 20rpx);
						border-radius: 5rpx;
					}

					.form-group {
						display: flex;
						flex-wrap: wrap;

						.form-lable {
							display: flex;
							line-height: 60rpx;
							margin-right: 20rpx;

							.radio-box {

								.radio {
									transform: scale(0.7);
								}
							}

						}
					}

				}

			}

			.sub-btn-box {
				padding: 0 20rpx 80rpx 0;
				margin-top: 50rpx;

				.sub-btn {
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
					color: white;
					border-radius: 10rpx;
					font-size: 28rpx;
					background-color: #7e5a91;
					margin: 20rpx 0;
				}
			}
		}
	}
</style>